// 仿写一个函数 vueuse
// 明白一下什么叫做 '可复用的逻辑函数'

// 提供的功能:
// 基于滚动行为的发生 不断地给出一个距离顶部的像素值
// 具体我们要用这个像素值做什么事, 不一定
// 给到的逻辑非常的单一独立 只要你的场景是想用到一个距离顶部的滚动值
import { ref } from 'vue'
export function useWindowScroll () {
  const y = ref(0)
  // 逻辑
  // 基于滚动行为为的发生 拿到当前距离顶部的像素值 赋值给 y
  window.addEventListener('scroll', () => {
    const scrollTop = document.documentElement.scrollTop
    y.value = scrollTop
  })
  return {
    y
  }
}

// 抽离逻辑函数的通用思想
// 1. 定义一个函数 useXXX
// 2. 在函数里面定义个由 ref 函数生成的响应式数据
// 3. 基于某个行为不断地给这个响应式数据赋值
// 4. 最后把这个响应式数据以对象包裹地形式返回
